<template>
  <view class="page container">
    <u-swiper :list="swiperList" :radius="0" height="556rpx"></u-swiper>
    <view class="pad-32 bgc-fff" style="padding-bottom: 0">
      <view class="flex-between-center mb-20">
        <text class="fs-40 fw-500">{{ shopInfo.title || "" }}</text>
        <text class="fs-28 c-677585">浏览 {{ shopInfo.see_num || 0 }}次</text>
      </view>
      <view class="flex-column-center">
        <image src="/static/marker-icon.png" class="w-26 h-32 mr-4"></image>
        <text class="fs-28 c-677585">{{ shopInfo.map_address || "" }}</text>
      </view>
      <view class="h-1 bgc-f7f8fa mt-22"></view>
      <view class="h-100 flex-around-center">
        <!-- 收藏 -->
        <view class="flex-column-center" @click="changeCollect">
          <view>
            <u-icon
              name="heart"
              color="#677585"
              size="40rpx"
              v-if="!is_collect"
            ></u-icon>
            <u-icon
              name="heart-fill"
              color="#ff0000"
              size="40rpx"
              v-else
            ></u-icon>
          </view>
          <text class="fs-28 ml-11 fw-500">收藏</text>
        </view>
        <!-- 分享 -->
        <view class="flex-column-center" @click="openMap">
          <image src="/static/svg/yjdh.svg" class="w-36 h-36"></image>
          <text class="fs-28 ml-11 fw-500">导航</text>
        </view>
      </view>
    </view>
    <view class="h-28 bgc-f7f8fa"></view>
    <view class="pad-32 bgc-fff">
      <view class="flex-column-center mb-28">
        <view class="w-6 h-34 bgc-c5261d br-40"></view>
        <view class="fs-32 fw-500 ml-14">酒厂简介</view>
      </view>
      <u-parse :content="shopInfo.content || ''"></u-parse>
    </view>
    <view class="h-28 bgc-f7f8fa"></view>
    <view class="pad-32 bgc-fff">
      <view class="flex-between-center mb-28">
        <view class="flex-column-center">
          <view class="w-6 h-34 bgc-c5261d br-40"></view>
          <view class="fs-32 fw-500 ml-14">经营产品</view>
        </view>
      </view>
      <view class="tabs">
        <view
          class="tab-item"
          :class="{ 'tab-item-active': goodsParams.cate_id === '' }"
          @click="changeCate('')"
        >
          不限
        </view>
        <view
          class="tab-item"
          v-for="item in cate_list"
          :key="item.id"
          :class="{ 'tab-item-active': goodsParams.cate_id === item.id }"
          @click="changeCate(item.id)"
        >
          {{ item.title }}
        </view>
      </view>
      <view class="goods-list">
        <view
          class="goods-item pt-32 pb-32"
          style="padding-bottom: 0"
          v-for="(item, index) in displayedGoods"
          :key="index"
        >
          <goods-card img-width="216rpx" :info="item"></goods-card>
        </view>
      </view>
      <view
        class="pad-32 flex-center-center"
        @click="is_expand = !is_expand"
        v-if="goodsList.length > 3"
      >
        <view class="fs-28 fw-500 flex-column-center">
          {{ is_expand ? "收起" : "展开" }}
          <u-icon
            :name="is_expand ? 'arrow-up' : 'arrow-down'"
            size="28rpx"
          ></u-icon>
        </view>
      </view>
    </view>
    <view class="h-28 bgc-f7f8fa"></view>
    <view class="pad-32 bgc-fff">
      <view class="flex-between-center">
        <view class="flex-column-center">
          <view class="w-6 h-34 bgc-c5261d br-40"></view>
          <view class="fs-32 fw-500 ml-14">新闻公告</view>
        </view>
      </view>
      <view class="news-list">
        <view
          class="news-item pt-32 pb-32"
          style="padding-bottom: 0"
          v-for="item in newsList"
          :key="item.id"
        >
          <FactoryNewCard :info="item"></FactoryNewCard>
        </view>
      </view>
    </view>
    <view class="bottom-box bgc-fff">
      <view class="mt-20">
        <text class="fs-28">联系人：</text>
        <text class="fw-500 fs-36">{{ shopInfo.contact_name || "" }}</text>
      </view>
      <u-button
        :customStyle="btnStyle"
        @click="$utils.onCall(shopInfo.contact_phone || '')"
        >联系TA</u-button
      >
    </view>
  </view>
</template>
<script>
import GoodsCard from "@/components/rowCards/GoodsCard";
import FactoryNewCard from "@/components/rowCards/FactoryNewCard";
import {
  jiu_collectApi,
  factoryDetailApi,
  jiu_news_listApi,
} from "@/services/home";
import { productListApi } from "@/services/home";
import { thingListApi } from "@/services/common";
export default {
  data() {
    return {
      is_expand: false,
      btnStyle: {
        border: "none",
        backgroundColor: "#C5261D",
        color: "#fff",
        width: "312rpx",
        height: "88rpx",
        opacity: 1,
        borderRadius: "10rpx",
        background: "#AE2C2C",
      },
      swiperList: [],
      shop_id: "",
      shopInfo: {},
      is_collect: 0,
      goodsList: [],
      cate_list: [],
      goodsParams: {
        cate_id: "",
        shop_id: "",
      },
      newsList: [],
    };
  },
  components: { GoodsCard, FactoryNewCard },
  computed: {
    displayedGoods() {
      return this.is_expand ? this.goodsList : this.goodsList.slice(0, 3);
    },
  },
  onLoad(options) {
    this.shop_id = options.id;
    this.goodsParams.shop_id = this.shop_id;
    this.getDetail();
    this.getNewsList();
  },
  methods: {
    changeCate(id) {
      this.goodsParams.cate_id = id;
      this.getGoodsList();
    },
    async changeCollect() {
      await jiu_collectApi({
        shop_id: this.shop_id,
      });
      this.is_collect = this.is_collect == 1 ? 0 : 1;
    },
    openMap() {
      uni.openLocation({
        latitude: +this.shopInfo.lat,
        longitude: +this.shopInfo.lng,
        name: this.shopInfo.map_address || "",
        address: this.shopInfo.map_street || "",
      });
    },
    getDetail() {
      factoryDetailApi({ shop_id: this.shop_id }).then((res) => {
        this.is_collect = res.data?.is_collect || 0;
        this.shopInfo = res.data?.shop_info || {};
        this.swiperList = [res.data?.shop_info?.logo || ""];
        this.cate_list = res.data?.cate_list || [];
        this.getGoodsList();
      });
    },
    getGoodsList() {
      productListApi(this.goodsParams).then((res) => {
        this.goodsList = res.data?.data || [];
      });
    },
    getNewsList() {
      jiu_news_listApi({ shop_id: this.shop_id }).then((res) => {
        this.newsList = res.data?.data || [];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding-bottom: 200rpx;
  background-color: #f7f8fa;
}

.tabs {
  display: flex;
  flex-wrap: wrap;

  .tab-item {
    min-width: 96rpx;
    height: 48rpx;
    background-color: #f7f8fa;
    border-radius: 8rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 22rpx;
    margin-bottom: 22rpx;

    &-active {
      background-color: rgba(197, 38, 29, 1);
      color: #fff;
    }
  }
}

.bottom-box {
  padding: 24rpx 32rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
</style>
